<template>
  <div>
    <el-form
        label-position="right"
        label-width="100px"
        :model="website"
        style="max-width: 800px"
    >
      <el-input type="hidden" v-model="website.id" />
      <el-form-item label="网站名称">
        <el-input v-model="website.name" />
      </el-form-item>
      <el-form-item label="网站展示名称">
        <el-input v-model="website.showName"/>
      </el-form-item>
      <el-form-item label="网站介绍">
        <el-input v-model="website.summary" />
      </el-form-item>
      <el-form-item label="首页底部ICP">
        <el-input v-model="website.footerIcp" />
      </el-form-item>
      <el-form-item label="公告">
        <el-input v-model="website.bulletin"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  @click="submitForm()">
          确认修改
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>

import {onMounted, reactive} from "vue";
import {ElNotification} from "element-plus";
import {edit, getWebsite} from "../../api/webSite.js";

const website = reactive({
  id: 1,
  name: '',
  showName: '',
  logo: '',
  summary: '',
  footerIcp: '',
  footCopyRight: '',
  bulletin: '',
})

onMounted(()=>{
  getWebsite().then((res:any)=>{
    if(res.code == '200' || res.code == 200){
      website.id = res.data.id;
      website.name = res.data.name;
      website.showName = res.data.showName;
      website.logo = res.data.logo;
      website.summary = res.data.summary;
      website.footerIcp = res.data.footerIcp;
      website.footCopyRight = res.data.footCopyRight;
      website.bulletin = res.data.bulletin;
    }else {
      ElNotification({
        title: 'error',
        message: res.msg,
        type: 'error',
      })
    }

  })
})

const submitForm = async () => {
  edit(website).then((res:any) =>{
    if(res.code == '200' || res.code == 200){
      ElNotification({
        title: 'success',
        message: '修改成功!',
        type: 'success',
      })
    }else {
      ElNotification({
        title: 'error',
        message: res.msg,
        type: 'error',
      })
    }
  })

}

</script>

<style scoped>

</style>
